<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../include.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>登录</title>
		<link rel="stylesheet" href="${ctx }/static/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="${ctx }/static/css/login.css" />
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<style>

		
 
#mainBody {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
} 
.cloud {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(${ctx}/static/images/cloud.png) no-repeat;
    z-index: 1;
    opacity: 0.5;
} 
#cloud2 {
    z-index: 2;
}
.cloud {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(${ctx}/static/images/cloud.png) no-repeat;
    z-index: 1;
    opacity: 0.5;
}

.layui-form-select dl dd {
    cursor: pointer;
    color: #171515;
}
		</style>
	</head>

	<body class="beg-login-bg"  style="background-color:#1c77ac; background-image:url(${ctx}/static/images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">
		<div id="mainBody">
	      <div id="cloud1" class="cloud"></div>
	      <div id="cloud2" class="cloud"></div>
	    </div>  
		
		<div class="beg-login-box">
			<header>
				<h1>后台登录</h1>
			</header>
			<div class="beg-login-main">
				<form action="/manage/login" class="layui-form" method="post"><input name="__RequestVerificationToken" type="hidden" value="fkfh8D89BFqTdrE2iiSdG_L781RSRtdWOH411poVUWhxzA5MzI8es07g6KPYQh9Log-xf84pIR2RIAEkOokZL3Ee3UKmX0Jc8bW8jOdhqo81" />
					<div class="layui-form-item">
						<label class="beg-login-icon">
                        <i class="layui-icon">&#xe613;</i>
                    </label>
						<select name="loginType" lay-verify="required">
					        <option value="">请选择登陆方式</option>
					        <option value="common">管理员</option>
					        <option value="common/teacher">教师</option>
					      </select>
					</div>
					<div class="layui-form-item">
						<label class="beg-login-icon">
                        <i class="layui-icon">&#xe612;</i>
                    </label>
						<input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="这里输入登录名" class="layui-input">
					</div>
					<div class="layui-form-item">
						<label class="beg-login-icon">
                        <i class="layui-icon">&#xe642;</i>
                    </label>
						<input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="这里输入密码" class="layui-input">
					</div>
					<div class="layui-form-item">
						<div class="beg-pull-left beg-login-remember">
							<label>记住帐号？</label>
							<input type="checkbox" name="rememberMe" value="true" lay-skin="switch" checked title="记住帐号">
						</div>
						<div class="beg-pull-right">
							<button class="layui-btn layui-btn-primary" lay-submit lay-filter="login">
                            <i class="layui-icon">&#xe650;</i> 登录
                        </button>
						</div>
						<div class="beg-clear"></div>
					</div>
				</form>
			</div>
			<footer>
				<p>Beginner © yang.alikill.com</p>
			</footer>
		</div>
		<script type="text/javascript" src="${ctx }/static/layui/layui.js"></script>
		<script type="text/javascript" src="${ctx }/static/cloud/cloud.js"></script>
		<script>
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					$ = layui.jquery,
					form = layui.form();
					
				//自定义验证规则
				  form.verify({
					  userName: function(value){
				      if(value.length < 4){
				        return '登入帐号至少得4个字符啊';
				      }
				    }
				    ,password: [/(.+){6,12}$/, '密码必须6到12位']
				    
				  });
				  
				  //监听提交
				  form.on('submit(login)', function(data){
					  var parmas = data.field ;
				   // layer.alert(JSON.stringify(data.field), {
				   //   title: '最终的提交信息'
				    //});
				    
				    var tmpIndex = layer.load();
				    var url = '${ctx}/{type}/doAjaxLogin' ;
				    $.post(url.replace("{type}", parmas.loginType),data.field,function(rst){
				    	layer.close(tmpIndex);
				    	if(!rst){
				    		layer.msg('网络连接错误，请稍后再试。。。', {
				    			icon: 2,
				    			shade: [0.8, '#393D49'],
			    			  	anim: 6
			    			});
				    		return ;
				    	}
				    	
				    	if('error' == rst.code){
				    		layer.msg(rst.message, {
				    			icon: 2,
				    			shade: [0.8, '#393D49'],
			    			  	anim: 6
			    			});
				    		return ;
				    	}
				    	
				    	window.location.href="${ctx}"+rst.data ;
				    	
				    },'json');
				    return false;
				  });
				  
				
			});
		</script>
	</body>

</html>